<script setup>
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return []
    }
  }
})

// 动态计算列间距
const getColumnGap = (colIndex) => {
  return colIndex % 2 === 0 ? '2px' : '10px' // 奇数列右侧间隔10px，偶数列2px
}

// 批量添加类名
const batchAddClass = (ids, className) => {
  ids.forEach((id) => {
    let error_id_name = 'id_' + id[0] + '_' + id[1]
    const el = document.getElementById(error_id_name)
    el?.classList.add(className)
  })
}

// 监听ID数组变化
watch(
  () => props.data,
  (newVal) => {
    batchAddClass(newVal, 'grid-cell-error')
  },
  {
    deep: true
  }
)
onMounted(() => {})
</script>

<template>
  <div class="grid-container">
    <!-- 主网格区域 -->
    <div
      v-for="(_, rowIndex) in 48"
      :key="rowIndex"
      class="grid-row"
      :class="{ 'row-gap': rowIndex === 23 }"
    >
      <!-- 行号显示 -->
      <div class="row-number">{{ 48 - rowIndex }}</div>
      <!-- 网格单元格 -->
      <div
        v-for="(_, colIndex) in 54"
        :id="'id_' + (48 - rowIndex) + '_' + (colIndex + 1)"
        :key="colIndex"
        class="grid-cell"
        :class="[colIndex % 2 === 0 ? 'grid-even' : 'grid-odd']"
        :style="{ marginRight: getColumnGap(colIndex) }"
      ></div>
    </div>

    <!--      &lt;!&ndash; 第24行下插入空白 &ndash;&gt;-->
    <!--      <div v-show="showRowGap(rowIndex)" class="row-gap"></div>-->

    <!-- 底部列号 -->
    <div class="column-numbers">
      <div
        v-for="(_, colIndex) in 54"
        :key="colIndex"
        class="column-number"
        :style="{ marginRight: getColumnGap(colIndex) }"
      >
        {{ colIndex + 1 }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
//.home-page {
/* 容器布局 */
.grid-container {
  position: relative;
  padding-left: 40px; /* 行号区域宽度 */
  margin-bottom: 30px; /* 列号区域高度 */
  font-size: 14px;
  width: 1446px;
}

/* 行容器 */
.grid-row {
  display: flex;
  height: 16px;
  position: relative;
  margin-bottom: -1px; /* 消除边框重叠 */
}

/* 单元格核心样式 */
.grid-cell {
  position: relative;
  width: 20px;
  height: 16px;
  background: #00ff00;
  // border: 1px solid #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
  flex-shrink: 0;
  --margin-color: transparent; /* 定义 CSS 变量 */
}

.grid-even::after {
  content: '';
  display: block;
  position: absolute;
  right: -2px; /* 匹配margin-right值 */
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--margin-color); /* 目标颜色 */
}

.grid-cell-error {
  background: red; /* 定义 CSS 变量 */
}
.grid-margin-error {
  --margin-color: #ffdb00; /* 定义 CSS 变量 */
}

/* 行号样式 */
.row-number {
  position: absolute;
  left: -40px;
  width: 35px;
  text-align: right;
  line-height: 16px;
}

/* 列号容器 */
.column-numbers {
  display: flex;
  position: absolute;
  bottom: -22px;
  left: 40px; /* 对齐行号区域 */
}

/* 列号样式 */
.column-number {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* 行间空白处理 */
.row-gap {
  margin-bottom: 10px;
  background: transparent;
}
//}
</style>
